<style lang="scss">
    @import "../utils/base.scss";
    .ivu-tabs-bar{
        border-bottom: 0px solid #dcdae2;
        margin-bottom: 0px;
    }

    li.ul{
        background-color: rgb(241,245,240)
    }

    .ivu-tabs-no-animation > .ivu-tabs-content{
        background-color:rgb(243,243,243);
        height: 100%;
        overflow-y: auto;
        // padding-top: 10px;
    }
    .ivu-tabs-nav{
        top: 6px;
        padding-left:4px;
    }
    .ivu-tabs{
        user-select:none;
    }
    .ivu-tabs .ivu-tabs-tabpane{
        width:100%;
        margin:auto;
    }
    .ivu-tabs-nav-scroll{//tab头
        background-color:white;
        height:36px;
    }

    .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
        border-bottom: 1px solid #dcdae2;
        border-radius: 4px 4px 4px 4px;
    }
    .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-nav-container{
        height:36px;
    }
    .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active{
        height: 28px;
    }
    .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
        font-size: 12px;
        height: 24px;
        padding: 0px 12px 0px;
        line-height: 24px;
    }
    .ivu-tabs-nav-prev, .ivu-tabs-nav-next{
        height: 100%;
        line-height: 36px;
    }

    .ivu-tabs-nav .ivu-tabs-tab:hover{
        color: #4EA0FE;
        border: 1px solid #4EA0FE;
    }
    .ivu-tabs-tab:hover{
        border: 1px solid #4EA0FE;
    }
    .ivu-tabs-nav{
        color: #333333;
    }
    .ivu-tabs-nav-prev{
        border-right: 1px solid #dcdae2;
        background-color: #FFFFFF;
    }
    .ivu-tabs-nav-next {
        background-color: #FFFFFF;
        border-left: 1px solid #dcdae2;
    }
    .menu_style{
        background-color: #F1F1F5
    }
    .menu_style:hover{
        background-color: #FEF1DC
    }
</style>
<template>
    <mcontent>
        <template slot="left">
            <Menu theme="light" width="" style="user-select: none;"
                @on-select="changeMenu" :active-name="tabs.tabsPage"  class="ivu-menu-light">
                <MenuItem name="processmain" >
                    <Icon type="md-home" size="16" v-if="this.$hasPerm('processhome')"/>首页
                </MenuItem>
                <MenuItem name="build" v-if="this.$hasPerm('build')">
                    <Icon type="md-options" size="16"/>新建工单
                </MenuItem>

                <Submenu name="3" v-if="this.$hasPerm('mainSet')">
                    <template slot="title"><Icon type="md-cog" />工单管理</template>
                    <MenuItem class="menu_style" name="processSet" v-if="this.$hasPerm('processSet')">审批管理</MenuItem>
                    <MenuItem class="menu_style" name="announcementSet" v-if="this.$hasPerm('announcementSet')">公告配置</MenuItem>
                </Submenu>
                <Submenu name="4" v-if="this.$hasPerm('businessManager')">
                    <template slot="title"><Icon type="ios-construct" />业务管理</template>
                    <MenuItem  class="menu_style" name="accountManager" v-if="this.$hasPerm('accountManager')">
                        账号管理
                    </MenuItem>

                    <MenuItem  class="menu_style" name="netManager" v-if="this.$hasPerm('netManager')">
                        网络策略管理
                    </MenuItem>
                    <MenuItem class="menu_style" name="loadbalance" v-if="this.$hasPerm('loadbalance')">
                        负载均衡管理
                    </MenuItem>
                </Submenu>
                <Submenu name="8" v-if="this.$hasPerm('businessSet')">
                    <template slot="title"><Icon type="ios-construct" />业务配置</template>
                    <MenuItem class="menu_style" name="sysSet" v-if="this.$hasPerm('sysSet')">业务系统配置</MenuItem>
                    <MenuItem class="menu_style" name="sysdepartment" v-if="this.$hasPerm('sysdepartment')">业务部门配置</MenuItem>
                    <MenuItem class="menu_style" name="serviceSet" v-if="this.$hasPerm('serviceSet')">服务目录配置</MenuItem>
                    <MenuItem class="menu_style" name="nettemplate" v-if="this.$hasPerm('nettemplate')">网络策略配置</MenuItem>
                    <MenuItem class="menu_style" name="accounttemplate" v-if="this.$hasPerm('accounttemplate')">业务账号配置</MenuItem>
                </Submenu>
                <Submenu name="5" v-if="this.$hasPerm('tenantManage')">
                    <template slot="title"><Icon type="md-contacts" />租户管理</template>

                    <MenuItem class="menu_style" name="tenantSet" v-if="this.$hasPerm('tenantSet')">
                        租户配置
                    </MenuItem>
                    <MenuItem class="menu_style" name="projectSet" v-if="this.$hasPerm('projectSet')">
                        项目配置
                    </MenuItem>
                </Submenu>
                <Submenu name="6" v-if="this.$hasPerm('tenantAnalysis')">
                    <template slot="title"><Icon type="ios-podium" />租户分析</template>
                    <MenuItem class="menu_style" name="resouceInfo" v-if="this.$hasPerm('resourcePreview')">
                        服务订购概览
                    </MenuItem>
                    <MenuItem class="menu_style" name="BIReport" v-if="this.$hasPerm('BIReport')">
                        数据报表
                    </MenuItem>
                </Submenu>
                <Submenu name="7" v-if="this.$hasPerm('workAnalysis')">
                    <template slot="title"><Icon type="md-pie" />工单分析</template>
                    <MenuItem class="menu_style" name="activitiProcess" v-if="this.$hasPerm('activitiProcess')">
                        流程分析
                    </MenuItem>
                    <MenuItem class="menu_style" name="processAnalysis" v-if="this.$hasPerm('processAnalysis')">
                        入驻分析
                    </MenuItem>
                    <MenuItem class="menu_style" name="positionData" v-if="this.$hasPerm('positionData')">
                        位置数据
                    </MenuItem>
                </Submenu>
            </Menu>
            <!-- <homeDragbtn></homeDragbtn> -->
        </template>
        <template slot="right">
            <Tabs :animated="false" type="card"
            :value="tabs.tabsPage" @on-click="setTabPage"  @on-tab-remove="removeTabPsge" style="z-index:998">
                <TabPane v-for="(tab,index) in tabs.list" :key="tab.tabKey" v-bind:label="(h)=>h('span',{on:{dblclick:()=>{ dblclick(tab.tabKey)}}}, tab.title.length > 20 ? tab.title.substring(0,20) +'...': tab.title )" :name="tab.tabKey" :closable="tab.tabKey != 'processmain'" >
                    <div slot="slot1">

                    </div>
                    <div style="overflow:auto;height:calc(100vh - 85px);padding:8px 8px 0px 8px;user-select: text;min-width: 900px;">
                        <component :is="tab.key" :params="tab.params"></component>
                    </div>
                </TabPane>
            </Tabs>

        </template>

    </mcontent>
</template>
<script>
    import homeDragbtn from "../comp_chatter/homeDragbtn"
    import mcontent from "../comp_chatter/mcontent"
    import vuex from 'vuex';
    import mcontainer from '../comp_chatter/mcontainer'
    import Axios from 'axios'
    import mheader from "../comp_chatter/mheader"
    import mpage from "../comp_chatter/mpage"
    import setin from './applyVue/apply_settledIn'
    import processmain from "../comp_process/process_main"
    import processSet from "../comp_process/process_set"
    import apply from "../comp_process/process_apply"
    import handle from "../comp_process/process_handle"
    import build from '../comp_process/process_build'
    import serviceSet from './process_serviceSet'
    import accountManager from './process_account_primary.vue'
    import accountSecondary from './process_account_secondary'
    import announcementSet from '../comp_process/announcement'
    import netManager from './process_netManager'
    import loadbalance from './process_balance'
    import sysSet from '../comp_business/sys'
    import sysdepartment from '../comp_business/sysdepartment'
    import nettemplate from '../comp_business/nettemplate'
    import resouceInfo from './tenant_analysis/resources.vue'
    import resourcesDatail from './tenant_analysis/resources_detail.vue'
    import tenantSet from './tenantSet/tenant.vue'
    import projectSet from './tenantSet/project.vue'
    import activitiProcess from './activiti_analysis/process.vue'
    import taskmanagement from '../comp_user/task_management'
    import processAnalysis from './processAnalysis/processAnalysis.vue'
    import positionData from './activiti_analysis/positionData.vue'
    import BIReport from "./tenant_analysis/BIReport"
    import BIReportInfo from "./tenant_analysis/BIReportInfo"
    import accounttemplate from "../comp_business/accounttemplate.vue"
    import taginfo from "./applyVue/apply_model/tag_information/tag_info";
    import tagmodel from "./applyVue/apply_model/tag_information/tag_model";

    export default {
        data(){
            return{
                render: (h,params) => {
                    return h('span',{
                        on:{
                            dblclick:()=>{ this.dblclick(params)}
                        }
                    }, "params.title")
                },
                openname: 0,
                isRole: false,
                tabs:{
                    isEdit: true,
                    tabsPage: "processmain",       //需要显示的tab
                    lastPage: "",
                    list: [
                        {
                            title: "首页",
                            key: "processmain",     //需要加载的组件
                            tabKey: "processmain"   //tabs的名称
                        }
                    ],
                }
            }
        },
        components:{
            mcontent,mheader,mpage,mcontainer,processmain,setin,
            processmain,processSet,apply,handle,build,serviceSet,accountManager,accountSecondary,announcementSet,netManager,
            loadbalance,sysSet,resouceInfo,resourcesDatail,tenantSet,projectSet,activitiProcess,
            homeDragbtn,taskmanagement,processAnalysis,nettemplate,sysdepartment,positionData,BIReport,BIReportInfo,accounttemplate,taginfo,tagmodel
        },
        created:function(){
            // this.$store.commit("tabs", this.tabs);
            console.log("-tabs------>",this.$store.state.tabs)
            var t = this.$store.state.tabs
            if(t != undefined && t != null && t.tabsPage != undefined){
                this.tabs = t
            }else{
                this.$store.commit("tabs", this.tabs);
            }
        },
        methods: {
            label(h,tab){
                console.log("------------->",tab)
                return  h('span',{
                        on:{
                            dblclick:()=>{ this.dblclick(tab)}
                        }
                    }, "aasd")
            },
            dblclick(name){
                console.log("dblclick------->", )
                if(name != "processmain"){
                    this.removeTabPsge(name)
                }
            },
            setOpenName(name){
                this.openname = name
            },
            set(openName){
                this.openname = openName
                var temp = []
                if (openName == undefined) {
                    temp = ["0"]
                }else if(openName instanceof Array){
                    temp = openName
                }else{
                    temp = [openName + '']
                }
                return temp
            },
            //跳转标签
            changeMenu(name){
                // console.log(name)
                var isName = false //是否已经存在标签
                this.tabs.list.some(item =>{
                    if(item.tabKey === name){
                        isName = true
                        return
                    }
                })
                if( !isName){
                    if (name === "build") {
                        this.tabs.list.push({
                            title: "选择工单",
                            key: "build",
                            tabKey: "build"
                        })
                    }else if(name === "accountManager"){
                        this.tabs.list.push({
                            title: "主账号管理",
                            key: "accountManager",
                            tabKey: "accountManager"
                        })
                    }else if(name === "netManager"){
                        this.tabs.list.push({
                            title: "网络策略管理",
                            key: "netManager",
                            tabKey: "netManager"
                        })
                    }else if(name === "loadbalance"){
                        this.tabs.list.push({
                            title: "负载均衡管理",
                            key: "loadbalance",
                            tabKey: "loadbalance"
                        })
                    }else if(name === "processSet"){
                        this.tabs.list.push({
                            title: "审批管理",
                            key: "processSet",
                            tabKey: "processSet"
                        })
                    }else if(name === 'serviceSet'){
                        this.tabs.list.push({
                            title: "服务配置",
                            key: "serviceSet",
                            tabKey: "serviceSet"
                        })
                    }else if(name === 'announcementSet'){
                        this.tabs.list.push({
                            title: "公告配置",
                            key: "announcementSet",
                            tabKey: "announcementSet"
                        })
                    }else if(name === 'sysSet'){
                        this.tabs.list.push({
                            title: "业务系统配置",
                            key: "sysSet",
                            tabKey: "sysSet"
                        })
                    }else if(name === 'sysdepartment'){
                        this.tabs.list.push({
                            title: "业务部门配置",
                            key: "sysdepartment",
                            tabKey: "sysdepartment"
                        })
                    }else if(name === 'nettemplate'){
                        this.tabs.list.push({
                            title: "网络策略配置",
                            key: "nettemplate",
                            tabKey: "nettemplate"
                        })
                    }else if(name === 'resouceInfo'){
                        this.tabs.list.push({
                            title: "资源订购概览",
                            key: "resouceInfo",
                            tabKey: "resouceInfo"
                        })
                    }else if(name === 'tenantSet'){
                        this.tabs.list.push({
                            title: "租户配置",
                            key: "tenantSet",
                            tabKey: "tenantSet"
                        })
                    }else if(name === 'projectSet'){
                        this.tabs.list.push({
                            title: "项目配置",
                            key: "projectSet",
                            tabKey: "projectSet"
                        })
                    }else if(name === 'activitiProcess'){
                        this.tabs.list.push({
                            title: "流程分析",
                            key: "activitiProcess",
                            tabKey: "activitiProcess"
                        })
                    }else if(name === 'dataCatalog'){
                        this.tabs.list.push({
                            title: "数据目录",
                            key: "dataCatalog",
                            tabKey: "dataCatalog"
                        })
                    }else if(name === 'taskmanagement'){
                        this.tabs.list.push({
                            title: "任务调度",
                            key: "taskmanagement",
                            tabKey: "taskmanagement"
                        })
                    }else if(name === 'processAnalysis'){
                        this.tabs.list.push({
                            title: "入驻分析",
                            key: "processAnalysis",
                            tabKey: "processAnalysis"
                        })
                    }else if(name === 'positionData'){
                        this.tabs.list.push({
                            title: "位置数据目录概览",
                            key: "positionData",
                            tabKey: "positionData"
                        })
                    }else if(name === 'BIReport'){
                        this.tabs.list.push({
                            title: "数据表格分析",
                            key: "BIReport",
                            tabKey: "BIReport"
                        })
                    }else if(name === 'accounttemplate'){
                        this.tabs.list.push({
                            title: "业务账号配置",
                            key: "accounttemplate",
                            tabKey: "accounttemplate"
                        })
                    }
                }
                this.tabs.lastPage = this.tabs.tabsPage
                this.tabs.tabsPage = name
                this.$store.commit("tabs", this.tabs);
            },
            //设置显示的标签
            setTabPage(name){
                this.tabs.lastPage = this.tabs.tabsPage
                this.tabs.tabsPage = name
                this.$store.commit("tabs", this.tabs);
            },
            //删除删除标签
            removeTabPsge(name){
                // console.log(this.tabs, name)
                var index = -1;
                this.tabs.list.some((item,i) =>{
                    if(item.tabKey === name){
                        index = i
                        return true
                    }
                })
                this.tabs.tabsPage = this.tabs.list[index-1].tabKey
                this.tabs.list.splice(index,1)
                this.$store.commit("tabs", this.tabs);
            },
        },
        watch:{
            tabs(curVal,oldVal){
                console.log("-1----->",curVal,oldVal)
            },
            $route(to,from){
                console.log("改变路由--2--------------->",to,from);
            }
        }
    }
</script>
